<template>
  <div class="mainerleft">
      <div class="info clearfix" v-show="id">
          <div class="cover">
              <img v-lazy="songDetail.al.picUrl" v-if="songDetail.al">
              <span class="msk"></span>
          </div>
          <div class="cnt">
              <div class="hd">
                  <i class="icn"></i>
                  <em class="tit">{{songDetail.name}}</em>
              </div>
                <p class="des">歌手：
                     <router-link :to="{path:'/artist/song',query:{id:songDetail.ar[0].id}}" :title="songDetail.ar[0].name" class="underline" v-if="songDetail.ar">
                        {{songDetail.ar[0].name}}
                     </router-link>
                </p>
              <p class="des">所属专辑：
                    <router-link :to="{path:'/album',query:{id:`${songDetail.al.id}`}}" class="underline" v-if="songDetail.al"> {{songDetail.al.name}}</router-link>
                </p>
              <!-- 底部按钮 -->
                <div class="btns">
                    <a class="play" title="播放"  @click="setMusic(id)">
                        <i class="ply"></i>
                        <span>播放</span>
                    </a>
                    <a class="add" title="添加到播放列表"  @click="addMusicList(id)"></a>
                    <a class="dis">
                        <span>收藏</span>
                    </a>
                    <a class="share">
                        <span>分享</span>
                    </a>
                    <a class="download">
                        <span>下载</span>
                    </a>
                    <a class="comment">
                        <span>({{commentnum}})</span>
                    </a>
                </div>
                <div class="lyric">
                    <div class="desc-dot" v-show="halflyric" v-if="currentLyric.lines">
                        <p v-for="text,index in currentLyric.lines.slice(0,currentLyric.lines.length/4)" :key="index">
                            {{text.txt}}
                        </p>
                        <a class="underline" @click="halflyric=false">展开
                            <i class="down"></i>
                        </a>
                    </div>
                    <div class="desc-more" v-show="!halflyric">
                        <p v-for="text,index in currentLyric.lines" :key="index">
                            {{text.txt}}
                        </p>
                        <a class="underline" @click="halflyric=true">收起
                            <i class="up"></i>
                        </a>
                    </div>
                </div>
          </div>
      </div>
        <Comment @CommentNum='CommentNum'></Comment>
  </div>
</template>

<script>
import Lyric from 'lyric-parser'
import Comment from './Comment'
export default {
    name:'mainerleft',
    components:{Comment},
    data() {
        return {
            // 歌词
            currentLyric:{},
            // 歌曲详情
            songDetail:{},
            // 显示一半歌词
            halflyric:true,
            // 评论数
            commentnum:0,
        }
    },
    computed:{
        id(){
            return this.$route.query.id || 1915297033;
        }
    },
    watch:{
        id(){
            this.getlyric();
            this.getSongDetail();
        }
    },
    methods:{
        // 获取歌曲详情
        async getSongDetail(){
            let result = await this.$API.reqSong(this.id,localStorage.getItem('COOKIE'));
            this.songDetail = result.songs[0];
        },
        // 获取歌词
        async getlyric(){
            let result = await this.$API.reqlyric(this.id);
            this.currentLyric =  new Lyric(result.lrc.lyric, this.lyricHandle)
        },
        // 歌词回调
        lyricHandle({ lineNum, txt }) {
            console.log(lineNum)
            // if (!this.$refs.lyricLine) {
            //     return
            // }
            this.currentLyricNum = lineNum;
            // if(lineNum > 10) {
            //     let lineEl = this.$refs.lyricLine[lineNum - 10]
            //     if (this.$refs.lyricList) {
            //         this.$nextTick(() => {
            //             this.$refs.lyricList.scrollToElement(lineEl, 1000)
            //         })
            //     }
            // } else {
            //     if (this.$refs.lyricList) {
            //         this.$nextTick(() => {
            //             this.$refs.lyricList.scrollTo(0, 0, 1000)
            //         })
            //     }
            // }
            this.playingLyric = txt;
        },
        // 获取评论数
        CommentNum(data){
            this.commentnum = data;
        },
        // 添加音乐至播放列表
        addMusicList(ids){
            this.$store.dispatch('addMusicList',ids);
        },
        // 设置当前播放的音乐
        setMusic(id){
            this.$store.dispatch('setMusics',id);
            this.$store.dispatch('addMusicList',id);
            setTimeout(() => {
                this.$bus.$emit('play');    
            }, 500);      
        },
    },
    mounted(){
        this.getlyric();
        this.getSongDetail();
    }
}
</script>

<style scoped lang="less">
    .mainerleft{
        padding: 37px 30px 40px 39px;
        width: 709px;
        float: left;
        .info{
            width: 100%;
            .cover{
                float: left;
                width: 198px;
                height: 198px;
                position: relative;
                img{
                    width:130px;
                    height: 130px;
                    margin: 34px;
                }
                .msk{
                    display: block;
                    width: 206px;
                    height: 205px;
                    position: absolute;
                    top: -4px;
                    left: -4px;
                    background: url('../images/coverall.png') no-repeat -140px -580px;;
                }
            }
            .cnt{
                width: 414px;
                float: right;
                .hd{
                    width: 100%;
                    height: 32px;
                    .icn{
                        display: block;
                        float: left;
                        width: 54px;
                        height: 24px;
                        background: url('../images/icon.png') no-repeat 0 -463px;;
                    }
                    .tit{
                        margin-left: 10px;
                        vertical-align: middle;
                        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
                        font-style: normal;
                        text-align: left;
                        font-size: 24px;
                        line-height: 0px;
                    }

                }
                .des{
                    height: 16px;
                    margin: 10px 0;
                    width: 100%;
                    color: #999;
                    a{
                        color: #0c73c2;
                        &:hover{
                            color: #0c73c2;;
                        }
                    }
                }
                .btns{
                    height: 31px;
                    display: flex;

                    .play{
                        width: 66px;
                        padding-left: 5px;
                        background: url('../images/button2.png') no-repeat 0 -1652px;;
                        text-align: center;
                        line-height: 31px;
                        height: 31px;
                        border-top-left-radius: 5px;
                        border-bottom-left-radius: 5px;

                        i{
                            width: 20px;
                            height: 18px;
                            margin: 6px 2px 2px 0;
                            float: left;
                            background: url('../images/button2.png') no-repeat 0 -1622px;
                        }

                        span{
                            color: #fff;
                        }
                        &:hover{
                            cursor: pointer;  
                        }
                    }

                    .add{
                        width: 31px;
                        height: 31px;
                        margin-right: 5px;
                        background: url('../images/button2.png') no-repeat 0 -1588px;
                        
                        &:hover{
                            cursor: pointer;
                            background-position: -40px -1588px;  
                        }
                        &:active{
                            background-position: -80px -1588px;  
                        }
                    }

                    .dis{
                        // width: 92.6px;
                        // padding-right: 5px;
                        margin-right: 6px;
                        height: 100%;
                        background: url('../images/button2.png') no-repeat;
                        background-position: 0px -977px;
                        span{
                            padding-right: 10px;
                            display: inline-block;
                            height: 100%;
                            width: 100%;
                            background: url('../images/button2.png') no-repeat right -1106px;
                            line-height: 30px;
                            padding-left: 30px;
                        }
                        &:hover{
                             background-position: 0px -1063px;
                            color:#666;
                            cursor:pointer;
                        }
                    }
                    
                    .share{
                        height: 31px;
                        margin-right: 6px;
                        float: left;
                        line-height: 30px;
                        min-width: 23px;
                        cursor: pointer;
                        background: url('../images/button2.png') no-repeat;
                        background-position: 0 -1225px;

                        span{
                            padding-right: 10px;
                            width: 100%;
                            height: 100%;
                            display: inline-block;
                            line-height: 30px;
                            padding-left: 28px;
                            background: url('../images/button2.png') no-repeat;
                            background-position: right -1020px;
                        }
                        
                        &:hover{
                            color:#666;
                            cursor: pointer;
                        }
                    }

                    .download{
                        margin-right: 5px;
                        width: 60px;
                        height: 31px;
                        line-height: 30px;
                        min-width: 23px;
                        cursor: pointer;
                        background: url('../images/button2.png') no-repeat;
                        background-position: 0 -2761px;

                        span{
                            width: 100%;
                            height: 100%;
                            display: inline-block;
                            line-height: 30px;
                            padding-left: 28px;
                            background: url('../images/button2.png') no-repeat;
                            background-position: right -1020px;
                        }
                        &:hover{
                            color:#666;
                            cursor: pointer;
                        }
                    }

                    .comment{
                        margin-right: 5px;
                        
                        height: 31px ;
                        line-height: 30px;
                        min-width: 23px;
                        cursor: pointer;
                        background: url('../images/button2.png') no-repeat;
                        background-position: 0 -1465px;

                        span{
                            // width: 100%;
                            padding-right: 10px;
                            height: 100%;
                            display: inline-block;
                            line-height: 30px;
                            padding-left: 28px;
                            background: url('../images/button2.png') no-repeat;
                            background-position: right -1020px;
                        }
                        &:hover{
                            color:#666;
                            cursor: pointer;
                        }
                    }
                }
            }
            .lyric{
                float: left;
                margin-top: 40px;
                width: 100%;
                .desc-dot,
                .desc-more{
                    p{
                        margin: 5px 0;
                        color: #000;
                    }
                    a{
                        float: left;
                        color: #0c73c2;
                        .down{
                            display: inline-block;
                            width: 11px;
                            height: 8px;
                            background: url('../images/icon.png') no-repeat;
                            background-position: -65px -520px;
                        }
                        .up{
                            display: inline-block;
                            width: 11px;
                            height: 8px;
                            background: url('../images/icon.png') no-repeat;
                            background-position: -45px -520px;
                        }
                        &:hover{
                            color: #0c73c2;;
                        }
                    }
                }
            }
        }
    }
</style>